$(document).ready(function () {
    let img_box_img = $('.img_box > img')

    // 鼠标移动到下面的小图上
    let $images_img = $('.spec-list .images > img')
    $images_img.mouseover(function () {
        $images_img.removeClass('active')
        let $this = $(this);
        $this.addClass('active')
        img_box_img.attr('src', $this.attr('src'))
    });

    // 点击两侧的箭头
    let arrow_l = $('.spec-list a.arrow_l')
    let arrow_r = $('.spec-list a.arrow_r')
    let images = $('.spec-list .images')
    let images_hidden_count = 0
    let images_img_count = images.find('> img').length
    function change_images_text_indent() {
        let text_indent = -(76.74 * images_hidden_count) + 'px'
        images.animate({'text-indent': text_indent}, 300)
    }

    arrow_l.click(function () {
        if (images_hidden_count > 0) {
            images_hidden_count -= 1
            change_images_text_indent()
        }
    });

    arrow_r.click(function () {
        if (images_hidden_count < images_img_count - 5) {
            images_hidden_count += 1
            change_images_text_indent()
        }
    });

    // 鼠标移动到大图上显示局部放大
    let img_box = $('.img_box')
    let img_box_height = img_box.height()
    let img_box_width = img_box.width()
    let img_box_offset = img_box.offset()
    let cover = $('.img_box .cover');
    let cover_height = cover.height()
    let cover_width = cover.width()
    let preview = $('.img_box .preview')
    let preview_width = preview.width()
    let preview_height = preview.height()
    img_box.mousemove(function (e) {
        let left_top_x = e.clientX - img_box_offset.left - cover_width/2
        let left_top_y = e.clientY - img_box_offset.top + scrollY - cover_height/2
        left_top_x = Math.max(0, left_top_x)
        left_top_y = Math.max(0, left_top_y)
        left_top_x = Math.min(left_top_x, img_box_width-cover_width-2)
        left_top_y = Math.min(left_top_y, img_box_height-cover_height-2)
        cover.css({left: left_top_x+"px", top: left_top_y+'px'})
        // 下面是改变右侧大方框的背景坐标值
        let background_position_x = (left_top_x/cover_width) * preview_width
        let background_position_y = (left_top_y/cover_height) * preview_height
        preview.css('background-position', `-${background_position_x}px -${background_position_y}px`)
    });
    img_box.mouseover(function () {
        let background_width = preview_width * img_box_width / cover_width
        let background_height = preview_height * img_box_height / cover_height
        console.log(background_width, background_height)
        preview.css({
            'background-image': `url('${img_box.find('>img').attr('src')}')`,
            'background-size': `${background_width}px ${background_height}px`,
        })
    });

    //加入购物车部分
    let input_number = $('.add_to_cart input[type="number"]')
    let a_increase = $('.increase_or_reduce .increase')
    let a_reduce = $('.increase_or_reduce .reduce')
    function check_reduce_disabled() {
        let input_number_val = parseInt(input_number.val())
        if (input_number_val > 1) {
            a_reduce.removeClass('disabled')
        } else {
            a_reduce.addClass('disabled')
        }
    }
    a_increase.click(function () {
        let input_number_val = parseInt(input_number.val())
        input_number.val(input_number_val + 1)
        check_reduce_disabled()
    });
    a_reduce.click(function () {
        if (a_reduce.hasClass('disabled')) {
            return false;
        }
        let input_number_val = parseInt(input_number.val())
        input_number.val(input_number_val - 1)
        check_reduce_disabled()
    });
    input_number.blur(check_reduce_disabled);

    // 商品介绍、规格与包装、商品评价
    let $tabs_tab = $('.main .tabs .tab');
    let $contents_content = $('.contents > .content');
    $tabs_tab.click(function () {
        $tabs_tab.removeClass('active')
        let $this = $(this);
        $this.addClass('active')

        let index = $tabs_tab.index(this)
        $contents_content.removeClass('active')
        console.log(index)
        $contents_content.eq(index).addClass('active')
    });
    $contents_content.find('a.more').click(function () {
        $tabs_tab.eq(1).click()
    });
});